<template>
  <div style="display: inline-block">
    <el-form-item
      :label="item.label"
      :label-width="item.labelWidth"
      :prop="item.value"
      v-for="(item, index) in options"
      :key="index"
    >
      <!-- 普通输入框 -->
      <el-input
        v-if="item.type == 'text'"
        clearable
        class="t-form-content"
        v-model.trim="pramas[item.value]"
        :placeholder="item.placeholder"
        @input="getChangeValue(item.value, pramas[item.value])"
      ></el-input>
      <!-- 普通下拉 -->
      <el-select
        class="t-form-content"
        @change="getChangeValue(item.value, pramas[item.value])"
        v-if="item.type == 'select'"
        v-model="pramas[item.value]"
        :placeholder="item.placeholder"
        clearable
        filterable
      >
        <el-option
          v-for="(_item, _index) in item.data"
          :key="_index"
          :label="_item.label"
          :value="_item.value"
        ></el-option>
      </el-select>
      <!-- 多选 -->
      <el-select
        class="t-form-content"
        @change="getChangeValue(item.value, pramas[item.value])"
        v-if="item.type == 'multipleSelect'"
        v-model="pramas[item.value]"
        :placeholder="item.placeholder"
        clearable
        multiple
        filterable
      >
        <el-option
          v-for="(_item, _index) in item.data"
          :key="_index"
          :label="_item.label"
          :value="_item.value"
        ></el-option>
      </el-select>
      <!-- 日期筛选 -->
      <el-date-picker
        class="t-form-content"
        value-format="yyyy-MM-dd"
        v-if="item.type == 'date'"
        @change="getChangeValue(item.value, pramas[item.value])"
        v-model="pramas[item.value]"
        type="date"
        clearable
        :placeholder="item.placeholder"
      >
      </el-date-picker>
      <!-- 日期范围筛选 -->
      <el-date-picker
        class="t-form-content"
        :ref="'datePicker' + index"
        :data-value="item.value"
        @change="getChangeValue(item.value, pramas[item.value])"
        value-format="yyyy-MM-dd"
        v-if="item.type == 'daterange'"
        v-model="pramas[item.value]"
        type="daterange"
        range-separator="至"
        :start-placeholder="item.startPlaceholder || '开始日期'"
        :end-placeholder="item.endPlaceholder || '结束日期'"
        :picker-options="pickerOptions"
        align="right"
      >
      </el-date-picker>
    </el-form-item>
    <slot />
  </div>
</template>

<script>
export default {
  name:"t-form-item-filter",
  props: {
    type: {
      type: String,
      default: "list", //group
    },
    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultPramas:{
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  data() {
    return {
      pramas: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  watch:{
    deep:true,
    defaultPramas(o){
      this.pramas = Object.assign({},this.pramas,this.defaultPramas)
    }
  },
  mounted(){
    this.pramas = Object.assign({},this.pramas,this.defaultPramas)
  },
  methods: {
    //设置参数
    setParmasValue(key, value) {
      this.pramas[key] = value;
      this.changeFilter(this.pramas);
    },
    //监听值的改变
    getChangeValue(key, value) {
      this.setParmasValue(key, value);
    },
    //抛出事件
    changeFilter(pramas = this.pramas) {
      this.$emit("change-filter", pramas);
    },
    getAddressSelectValue(d){
       this.pramas.ProvinceCode = d.ProvinceCode;
       this.pramas.CityCode = d.CityCode;
      this.changeFilter(this.pramas);
    }
  },
};
</script>

<style lang="scss" scoped>
.t-form-content {
  width: 193px;
}
</style>